<template>
  <a-textarea @blur="blur" style="min-height: 60px" v-if="auth === 'edit'"
              @focus="focus" v-model="innerValue" ref="text"
              :placeholder="fieldConfig.placeholder"/>
  <pre v-else style="margin: 0; padding: 0">{{ innerValue }}</pre>
</template>
<script>
import {createProps} from '@/utils';
import $ from 'jquery';

export default {
  name: 'TextField',
  props: {
    fieldConfig: createProps(Object),
    value: createProps(String),
    title: createProps(String),
    auth: createProps(String)
  },
  mounted() {
    this.initHeight()
  },
  methods: {
    initHeight() {
      this.$nextTick(() => {
        try {
          let ele = this.$refs.text.$el;
          if ($(ele).parent()[0].tagName === 'TD') {
            let height = $(ele).parent().height();
            $(ele).height(height - 10);
          }
        } catch (e) {
        }
      })
    },
    blur() {
      (this.tempValue !== this.value) && this.$emit('update');
    },
    focus() {
      this.tempValue = this.value;
    }
  },
  computed: {
    innerValue: {
      get() {
        return this.value || this.title;
      },
      set(v) {
        this.$emit('update:value', v);
        this.$emit('update:title', v);
      },
    }
  }
};
</script>